<template>
	<view class="login-wrap">
		<!-- <u-icon class="fanhui" name="arrow-left" color="#333333" size="35" @click="goindex"></u-icon> -->
		<view class="login">
			<text>绑定手机号</text>
		</view>

		<view class="login-info">
			<view class="info">
				<view class="img">
					<image :src="baseUrl + '/static/user/shouji.png'" mode=""></image>
				</view>
				<u-input v-model="mobile" :type="type" height="64" placeholder="请输入手机号" placeholderStyle={colorSty}
					color="#fff" />
			</view>
			<view class="info_yzipt">
				<view class="info_yzipt_left">
					<view class="img">
						<image :src="baseUrl + '/static/user/suo.png'" mode=""></image>
					</view>
					<u-input v-model="password" type="number" :clearable="false" height="64" color="#fff"
						placeholder="请输入验证码" placeholderStyle={colorSty} />
				</view>

				<view class="yzm" v-if="!show" @tap="getYzm">
					获取验证码
				</view>
				<view style="padding-top: 12rpx;" v-if="show">
					<u-count-down :timestamp="timestamp" color="#FED187" :show-days="state" :show-hours="state"
						:show-minutes="state" @end="yzmends"></u-count-down>
				</view>
			</view>
		</view>

		<view class="login-sub" @tap="subLogin">同意协议并绑定</view>
		<!-- <view class="txt">
				<view class="left" @tap="goForget">忘记密码</view>
				<view class="right" @tap="goRegister">去登录</view>
			</view> -->
		<view class="agreement" @tap="agreementState">
			<view class="img">
				<image :src="baseUrl + '/static/newImg/weixuan.png'" mode="" v-if="!img_show"></image>
				<image :src="baseUrl + '/static/newImg/yes.png'" mode="" v-if="img_show"></image>
			</view>
			<view class="txt">
				请您仔细阅读<text @click="goUrl('/userPage/user/agreement?type=2&id=4')"
					style="color: #FED187;">《用户协议》</text><text style="color: #FED187;"
					@click="goUrl('/userPage/user/agreement?type=3&id=5')">《隐私协议》</text>
			</view>
		</view>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
export default {
	data() {
		return {
			timestamp: 59,
			border: true,
			type: 'number',
			mobile: '',
			password: '',
			baseUrl: this.$configs.urls,
			code: '',
			show: false,
			img_show: true,
			state: false,
			txt: '获取验证码',
			bindobj: {},
			colorSty: {
				'color': '#ffffff'
			}
		};
	},
	onLoad(option) {
		this.bindobj = JSON.parse(option.bindobj)
	},
	methods: {
		yzmends() {
			this.show = false
		},
		goUrl(url) {
			uni.navigateTo({
				url: url
			})
		},
		agreementState() {
			this.img_show = !this.img_show
		},
		getYzm() {
			if (this.mobile == '') {
				this.$refs.uToast.show({
					title: '手机号码不能为空123',
					duration: 400,
					type: 'default'
				})
				return false;
			}
			let data = {
				mobile: this.mobile,
				// type:1,
				event: "register"
			}
			this.$Request.post(this.$api.user.getYzm, data).then(res => {
				////console.log(res)
				this.show = true
				this.$refs.uToast.show({
					title: res.msg,
					duration: 1000,
					type: 'default'
				})
			});
		},
		goRegister() {
			uni.navigateTo({
				url: '/pages/user/register'
			});
		},
		goindex() {
			uni.switchTab({
				url: '/pages/index/redouble'
			});
		},
		subLogin() {
			if (!this.img_show) {
				uni.showToast({
					title: '请勾选并同意协议',
					icon: "none"
				})
				return false;
			}
			if (!this.mobile) {
				uni.showToast({
					title: '手机号码不能为空',
					icon: "none"
				})
				return false;
			}
			if (!this.password) {
				uni.showToast({
					title: '验证码不能为空',
					icon: "none"
				})
				return false;
			}
			let data = {
				openid: this.bindobj.openId,
				unionid: this.bindobj.unionId,
				nickname: this.bindobj.nickName,
				avatar: this.bindobj.avatarUrl,
				mobile: this.mobile,
				captcha: this.password,
			};
			// #ifdef MP-WEIXIN || APP-PLUS
			data.invite_code = this.bindobj.invite_code
			this.otherLogin(data)
			// #endif


			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				//微信浏览器
				this.h5Login(data);
			} else {
				this.otherLogin(data)
			}
			// #endif

		},
		otherLogin(data) {
			// uni.request({
			// 	url: this.$api.user.authLogin,
			// 	data: data,
			// 	method: 'POST',
			// 	success(res) {
			// 		////console.log(res)
			// 	}
			// })
			this.$Request.post(this.$api.user.bindPhone, data).then(res => {
				uni.setStorageSync('USERINFO', res.data.access_token);
				uni.setStorageSync('id', res.data.userId);
				uni.showToast({
					title: res.msg,
					icon: 'none',
					success: res => {
						// #ifdef MP-WEIXIN
						uni.switchTab({
							url: "/pages/index/redouble"
						})
						return
						// #endif
						uni.switchTab({
							url: '/pages/index/redouble'
						});
					}
				});
			});
		},
		h5Login(data) {
			this.$Request.post(this.$api.user.weixinLogin, data).then(res => {
				uni.setStorageSync('USERINFO', res.data.access_token);
				uni.setStorageSync('id', res.data.userId);
				window.location.href = res.data.gc
			});
		},
		goForget() {
			uni.navigateTo({
				url: '/userPage/user/login/forget'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/.u-input__input {
	color: #fff !important;
}

/deep/.u-countdown-item {
	background-color: #262626 !important;
}

.login-wrap {
	width: 100vw;
	height: 100vh;
	background-color: #262626;
	padding-top: 20rpx;

	.login {
		// margin-top: 20rpx;
		padding-left: 80rpx;
		margin-bottom: 40rpx;

		text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #fff;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.agreement {
		width: 650rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-top: 10rpx;

		.img {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.txt {
			margin-bottom: 18rpx;
		}
	}

	.login-info {
		width: 588rpx;
		margin: 0 auto;

		.info_yzipt {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.info_yzipt_left {
				width: 420rpx;
				display: flex;
				align-items: center;
				height: 88rpx;
				background: rgba(0, 0, 0, 0.2);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 1rpx solid #FED187;
				border-radius: 88rpx;
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				padding-right: 20rpx;

				.img {
					width: 58rpx;
					height: 58rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}


		}

		.yzm {
			color: #FED187;
			font-size: 30rpx;
			margin-left: 10rpx;
		}

		.info {
			width: 100%;
			height: 88rpx;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			border: 1rpx solid #FED187;
			border-radius: 88rpx;
			// padding: 12rpx 25rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			margin-top: 48rpx;
			padding-right: 20rpx;
			margin-bottom: 48rpx;

			.yzm {
				line-height: 64rpx;
				color: #666666;
				font-size: 30rpx;
			}

			.img {
				width: 58rpx;
				height: 58rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.login-sub {
		background: #FF9E00;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		color: #fff;
		font-weight: 600;
		text-align: center;
		font-size: 35rpx;
		line-height: 88rpx;
		width: 588rpx;
		border-radius: 88rpx;
		margin: 0 auto;
		margin-top: 75rpx;
	}

	.txt {
		padding-top: 23rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		width: 588rpx;
		margin: 0 auto;
		display: flex;
		color: #fff;

		.left {
			flex: 1;
			text-align: left;
		}

		.right {
			flex: 1;
			text-align: right;
		}
	}
}

button {
	background: linear-gradient(180deg, #ff6000 0%, #feaa56 100%);
	margin-top: 200upx;
	border-radius: 15upx !important;
}

button::after {
	border: none;
	background: none;

}

.btn_img {
	width: 90upx;
	height: 90upx;
}

.topimg {
	width: 750rpx;
	height: 382rpx;
}

.fanhui {
	position: fixed;
	top: 70upx;
	left: 30upx;
}

.titles {
	font-size: 38upx;
	padding: 180upx 0 20upx 20upx;
	font-weight: bold;
	color: #333333;
}

.tit_con {
	font-size: 32upx;
	color: #666666;
	padding: 0 0 50upx 20upx;
}
</style>
